<template>
  <div class="opinionBar">
    <div class="thumbs_up">
      <p :class="selectState()" @click="option(0)">看涨</p>
      <p v-if="selected.state == '2' ">
        <span  class="stateTip">我看今日大盘</span>
        <span  class="resetTip">每日04:00重置数据</span>
      </p>
      <p v-else>
        <span v-if="selected.state=='0'">今日我<b class="red" >看涨</b></span>
        <span v-if="selected.state=='1'">今日我<b class="green" >看跌</b></span>
        <span class="blue" @click="option(2)">点我重选</span>
      </p>
      <p :class="selectState()" @click="option(1)">看跌</p>
    </div>
    <div class="progressBar">
      <p class="left" :style="cptWidth(selected.leftNum)">{{selected.leftNum}}人</p>
      <p class="right" :style="cptWidth(selected.rightNum)">{{selected.rightNum}}人</p>
    </div>
  </div>
</template>

<script>
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import {getNowTime} from '@/common/common'
import LocalDAO from '@/common/localDAO'
export default {
  name: 'opinion-bar',
  data () {
    return {
      msg: '',
      selected: {
        state: '2',
        leftNum: '',
        rightNum: ''
      },
      userCode: '',
      params: {
        opinion: '2',
        userCode: '15334917',
        date: '20170630'
      }
    }
  },
  methods: {
    cptWidth(num) {
      if (this.selected.leftNum == 0 && this.selected.rightNum == 0) {
        return {width: '50%'}
      }
      let width = (num / (Number(this.selected.leftNum) + Number(this.selected.rightNum)) * 100).toFixed(1) + '%';
      return {width: width, minWidth: '19%'}
    },
    selectState() {
      return this.selected.state != '2' ? ['disabled', 'selected'] : ''
    },
    // 选择看涨、看跌
    option(choice) {
      let vm = this;
      vm.params.opinion = choice;
      if (!LocalDAO.getUserCode()) {
        //  选择看涨看跌时  未登录状态 先进入登录页面
        remoteDAO.login(function (response) {
          if (response.error == 0) {
            // 登录成功跳转回来  获取本人今日观点
            vm.getMyOpinion(function () {    // 该回调是为了处理 本人今日观点为null是 设置观点
              vm.option(choice)
            })
          }
        });
      } else {
        // 判断 如果已经选择看涨、看跌  即无法再次点击
        if (vm.selected.state != '2' && choice != 2) {
          return;
        } else {
          vm.setMyOpinion(vm.params)
        }
      }
    },
    //  获取今日观点数据
    getOpinion () {
      let vm = this;
      remoteDAO.invoke(constant.InterfaceEnum.GET_OPINION, {date: vm.params.date}).then((result) => {
        vm.selected.leftNum = result.gainOpinion;
        vm.selected.rightNum = result.slipOpinion;
      });
    },
    // 设置今日本人观点
    setMyOpinion (params) {
      let vm = this;
      // params { opinion, userCode, date}
      remoteDAO.invoke(constant.InterfaceEnum.SET_MY_OPINION, params).then((result) => {
        if (params.opinion == '0') {
          vm.selected.leftNum += 1;
        }
        if (params.opinion == '1') {
          vm.selected.rightNum += 1;
        }
        if (params.opinion == '2') {
          if (vm.selected.state == '0') {
            vm.selected.leftNum -= 1
          } else {
            vm.selected.rightNum -= 1
          }
        }
        vm.selected.state = params.opinion;
      })
    },
    // 获取本人今日观点
    getMyOpinion (callback) {
      let vm = this;
      // params { userCode, date}
      remoteDAO.invoke(constant.InterfaceEnum.GET_MY_OPINION, vm.params).then((result) => {
        console.log('获取本人今日观点成功')
        // 设置selected的状态 并且将本人观点存入sessionStorage
        vm.selected.state = result
        sessionStorage.myOpinion = result;
        // 本人今日未设置观点则进行callback处理
        if (vm.selected.state == '2') {
          callback()
        }
      });
    }
  },
  mounted () {
    let vm = this;
    vm.params.userCode = LocalDAO.getUserCode();
    vm.params.date = getNowTime();
    // 获取今日观点人数
    this.getOpinion();
    // 如果登录成功 则直接获取本人今日观点
    if (LocalDAO.getUserCode()) {
      sessionStorage.myOpinion == undefined ? vm.getMyOpinion() : vm.selected.state = sessionStorage.myOpinion;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../../../assets/css/variables.less';
  *{
    margin:0;
    padding: 0;
  }
  b{
    font-weight: 500;
  }
  .opinionBar{
    height: 0.945rem;
    width:100%;
    position: absolute;
    z-index: 10000000;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
  }
  .thumbs_up{
    width:92%;
    margin:0.1rem auto;
    height:0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .disabled{
      opacity: .2;
    }
    .selected{
      animation: bounce .8s;
    }
    p{
      width:.7rem;
      height:0.3rem;
      font: 0.12rem/.3rem PingFangSC;
      border: 1px solid #eb333b;
      border-radius: 0.5rem;
      background-repeat: no-repeat;
      background-size: .18rem;
      background-position: 0.08rem 0.05rem;
    }
    p:first-child{
      background-image: url('~assets/images/up.png');
      text-indent: 0.2rem;
      color: #eb333b;
    }
    p:nth-child(2){
      font-size: .15rem;
      height: 0.4rem;
      width: auto;
      border: none;
      line-height: 0.2rem;
      span{
        display: block;
      }
      .red{
        color: #eb333b;
      }
      .green{
        color: green;
      }
      .blue{
        font-size: 0.12rem;
        color:#36a0ef;
      }
      .resetTip{
        font-size: .12rem;
        color: #a4a4a4;
      }
    }
    p:last-child{
      color: #1aae52;
      text-indent: -0.2rem;
      border: 1px solid #1aae52;
      background-image: url('~assets/images/down.png');
      background-position: 0.45rem 0.09rem;
    }
  }
  .progressBar{
  width:90%;
  margin: auto;
  display: flex;
  color: white;
  p{
    display: inline-flex;
    align-items: center;
    font-size: 0.1rem;
    font-family: PingFangSC;;
    width:50%;
    height:0.17rem;
    background: red;
    text-indent: 0.2rem;
    border-bottom-left-radius: 0.30rem;
    border-top-left-radius: 0.30rem;
  }
  p:last-child{
    box-sizing: border-box;
    width: 50%;
    background: green;
    justify-content: flex-end;
    padding-right: 0.2rem;
    border-radius: 0;
    border-bottom-right-radius: 0.30rem;
    border-top-right-radius: 0.30rem;
  }
}
  @-webkit-keyframes bounce /* Safari and Chrome */
{
  0%   {transform:scale(1.2);}
  30%  {transform:scale(1.1);}
  50%  {transform:scale(1.2);}
  65%  {transform:scale(1);}
  85% {transform:scale(1.1);}
  100% {transform:scale(1);}
}
</style>
